<template>
  <div class="notice">
    <div class="notice-title">
      <button class="notice-title-button">最新公告</button>
    </div>
    <div class="notice-content">
      <el-row :gutter="20" justify="space-between" type="flex" align="middle">
        <el-col :span="6" class="notice-content1">
          <carousel :swiper-list="noticeSwiperList" />
        </el-col>
        <el-col :span="5" class="notice-content2">
          <ul>
            <li v-for="(noticeBtn) in noticeBtnList" :key="noticeBtn.id"><button>{{ noticeBtn.name }}</button><span>{{ noticeBtn.content }}</span></li>

          </ul>
        </el-col>
        <el-col :span="7" class="notice-content3">
          <ul>
            <li v-for="(noticeBuy) in noticeBuyList" :key="noticeBuy.id">{{ noticeBuy.name }}:{{ noticeBuy.content }}</li>

          </ul>
        </el-col>
        <el-col :span="6" class="notice-content3">
          <ul>
            <li v-for="(noticeStudy) in noticeStudyList" :key="noticeStudy.id"> {{ noticeStudy.content }}</li>

          </ul>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      noticeBtnList: [],
      noticeBuyList: [],
      noticeStudyList: [],
      noticeSwiperList: []
    }
  },
  mounted() {
    this.getNoticeList()
  },
  methods: {
    // 得到公告
    async getNoticeList() {
      const result = await this.$API.home.getNoticeList()
      if (result.code === 200) {
        result.data.forEach(element => {
          if (element.type === '1') {
            this.noticeBtnList.push(element)
          } else if (element.type === '2') {
            this.noticeBuyList.push(element)
          } else if (element.type === '3') {
            this.noticeStudyList.push(element)
          } else {
            this.$set(element, 'swiper_url', element.path)
            this.noticeSwiperList.push(element)
          }
        })
        this.noticeList = result.data
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.notice {
  // padding-bottom:20px;
  .notice-title {
    width: 100%;
    height: 2px;
    border: 2px solid rgb(56, 155, 74);
    display: flex;
    justify-content: center;
    align-items: center;
    .notice-title-button {
      font-size: 20px;
      width: 140px;
      height: 60px;
      border-radius: 15px;
      color: rgb(242, 242, 242);
      background-color: rgb(91, 152, 207);
      border: 0;
    }
  }
  .notice-content {
    // display: flex;
    text-align: left;
    margin-top: 80px;
    .notice-content1 {
      margin-top: -20px;
      img {
        width: 90%;
        height: 400px;
      }
    }

    .notice-content2 {
      ul {
        li {
          margin-bottom: 20px;
          button {
            height: 25px;
            width: 90px;
            margin: 4% 6%;
            background-color: rgb(246, 56, 29);
            border-radius: 10px;
            border: 0;
          }
          span {
            font-size: 14px;
          }
        }
      }
    }
    .notice-content3 {
      ul {
        li {
          font-size: 15px;
          padding: 4% 50px;
          margin-bottom: 20px;
        }
      }
    }
  }
}
</style>
